<template>
  <div class="pageContent">
    <div class="button-box">
      <a-button type="primary" @click="save">
        保存
      </a-button>
    </div>
    <a-spin :spinning="loading">
      <previewModal
        ref="previewModal"
        :drawingList="drawingList"
        @getJsonData="getJsonData"
        :isView="type === 'view'"
      />
    </a-spin>
  </div>
</template>

<script>
import previewModal from "@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue";

import { PageView, RouteView } from "@/layouts";
import { setTypeList, loadTypeList, getTypeList } from "@/utils/formatter";
export default {
  name: "TreeList",
  components: {
    previewModal,
  },
  props: {
    tableId: "",
  },
  data() {
    return {
      drawingList: {},
      model: {},
      type: "",
      tableUuid: "",
      loading: false,
      fieldList: [],
      url: {
        getPageSet: "/form/formDatabase/formGetPageSet",
        save: "/form/formDatabase/formSave",
        update: "/form/formDatabase/formUpdate",
        deleteBatch: "/form/formDatabase/formDelete",
      },
      tableDataType: "",
    };
  },
  mounted() {
    if (this.tableId) {
      this.loadData(this.tableId);
      return;
    }
    this.loadData(this.$route.query.tableUuid || this.$route.meta.tableUuid);
  },
  methods: {
    // 获取数据
    loadData(uuid) {
      this.tableUuid = uuid || this.$route.meta.tableUuid;
      this.$post("/form/formBasicConfigure/getDetailByUuid", {
        uuid: this.tableUuid,
      }).then((res) => {
        // 多表的情况下后端返回的数据为数组，要处理下数据格式
        // if(info?.length){
        // 	info.forEach(item => {
        // 		this.model[item.tableField] = item.fieldValue
        // 	})
        // }else if (info) {
        // 	this.model = info;
        // }
        this.drawingList = JSON.parse(res.formDesign.designJson);
        this.tableDataType = res.formDatabase.type;
        this.drawingList.list.forEach((item) => {
          loadTypeList(item);
          // if (type === "add") {
          // 	loadTypeList(item);
          // } else {
          // 	getTypeList(item, this.model);
          // }
        });
        if (this.$refs.previewModal) {
          this.$refs.previewModal.jsonData = this.drawingList;
          this.$refs.previewModal.setData(this.drawingList);
        }
        this.loading = false;
      });
    },
    toHump(name) {
      return name.replace(/\_(\w)/g, function(all, letter) {
        return letter.toUpperCase();
      });
    },
    getJsonData(fieldList, json) {
      // this.fieldList = fieldList
      this.drawingList.list.forEach((e, index) => {
        let obj = setTypeList(e, fieldList);
        e = obj.e;
        fieldList = obj.list;
        return;
      });
      this.loading = true;
      // let pramar = fieldList;
      let pramar = {
        list: [],
      };
      if (this.tableDataType == 2) {
        for (let obj in fieldList) {
          this.drawingList.list.map((item) => {
            if (item["model"] === obj) {
              pramar.list.push({
                tableName: item.tableName,
                tableField: item.model,
                fieldValue: fieldList[obj],
              });
            }
          });
        }
        if (pramar.list.length) {
          pramar.list = JSON.stringify(pramar.list);
        }
      } else {
        pramar = fieldList;
      }

      pramar.formUuid = this.tableUuid;

      pramar.uuid = "";
      this.$post(this.url.save, pramar).then((res) => {
        if (res.statusCode === 200) {
          this.$message.success("新增成功！");
          this.$refs.previewModal.resetForm();
        } else {
          this.$message.error(res.message, 1.5);
        }
      });

      this.loading = false;
    },
    save() {
      this.$refs.previewModal.getJsonData();
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-form {
  height: auto;
  width: 100%;
}

/* .mL .ant-modal-footer {
		border: none !important;
	} */
.pageContent {
  background-color: #fff;
  height: calc(100vh - 144px);
  padding: 10px;
  overflow: auto;
}

.button-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
